/**
 * @file
 * Admin styles for the image module.
 */

/**
 * Image style configuration pages.
 */

/* Add new effect form. */
.image-style-new,
.image-style-new div {
  display: inline;
}

/* Image style columns. */
.image-style-preview__col {
  float: left;
  top: 50%;
  width: 48%;
  padding-bottom: 2em;
  text-align: center;
}

/* Image style preview images. */
.image-style-preview__preview-image {
    margin: auto;
    position: relative;
}
.preview-image__width {
  position: absolute;
  height: 2px;
  left: -1px;
  bottom: -6px;
  border: 1px solid #666;
  border-top: none;

  .dimension {
    position: relative;
    top: 4px;
  }
}
.preview-image__height {
  position: absolute;
  right: -6px;
  top: -1px;
  width: 2px;
  border: 1px solid #666;
  border-left: none;

  .dimension {
    position: absolute;
    height: 2em;
    top: 50%;
    left: 10px;
    margin-top: -1em;
  }
}

/**
 * Image anchor form element.
 */
.image-anchor {
  width: auto;

  .even,
  .odd {
    background: none;
  }

  td {
    border: 1px solid #ccc;
  }
}
